<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* js中的类 是构造函数 + new 组合模仿实现面向对象的类 */
        // ES5 的类
        // function Person(name, age) {
        //     this.name = name;
        //     this.age = age;
        //     //父类身上添加方法
        //     // this.fn = function () {
        //     //     console.log("fn");
        //     // }
        // }
        // //prototype  公共空间
        // //父类的原型上添加方法   节省内存
        // Person.prototype.fn = function () {
        //     console.log("fn");
        // }

        // let zhangsan = new Person("张三", 20);
        // let lisi = new Person("李四", 21);
        // // 找的都是父类原型上的方法  是同一个
        // console.log(zhangsan.fn === lisi.fn); //true


        //ES6 的类  :  本质也是构造函数,只是提供了一种新的语法糖
        // class Person {
        //     //constructor 构造器    函数会在实例化的时候执行
        //     constructor(name, age) {
        //         this.name = name;
        //         this.age = age;
        //     }
        //     fn() {
        //         console.log("fn");
        //     }
        // }


        // let zhangsan = new Person("张三", 20);
        // let lisi = new Person("李四", 21);
        // // console.log(zhangsan);// Person {name: '张三', age: 20}
        // // console.log(lisi);// Person {name: '李四', age: 21}
        // zhangsan.fn(); // fn
        // lisi.fn(); // fn
        // console.log(typeof Person); //function



        //属性的多种定义方式
        //1.直接把属性写在外边,不需要this
        //2.支持get 和 set
        class Person {
            constructor() {
                this.name = "张三";

                this.myfn();
            }
            fn() {
                console.log(this.name);
            }
            myfn() {
                console.log("myfn");
            }
            get age() {
                console.log("get");
                return 20;
            }
            set age(newvalue) {
                console.log("??", newvalue); // ?? 30
            }
        }

        let zhangsan = new Person();
        console.log(zhangsan); // Person {name: '张三', age: 20}
        zhangsan.age = 30;
        zhangsan.fn(); //张三
    </script>
</body>

</html>